<template>
	<view>
	
		
			
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="orderItem bgWhite ptb10 plr10 mb12  mt10 radius10 " v-for="(item,index) in gyList "
					:key="index" >
					
					<view class=" justify-start">
                        <text class="status">{{item.table_status==1?'使用中':"空闲中"}}</text>
                        <view class="tableName">
                                    {{item.name}}
                        </view>
						<image src="/static/images/table1.png" mode="widthFix"></image>
						<view class="flex-col orderright justify-between ">
							<text class="orderName clamp  mt10">{{item.shop_name}}</text>
						    <view class="justify-start align-center">
						        <text>球场位置：{{item.shop_address}}</text>
						        
						    </view>
                            <view class="" v-if="item.time_arr">
                            	预约时间： <text class="ml10" v-for="(i,n) in  JSON.parse(item.time_arr)">{{i||""}}</text> 
                            </view>
							<view class="">
								提交时间：{{item.addtime||""}}
							</view>
						</view>
					</view>
                    <uv-line margin="20rpx 0"></uv-line>
					<view class="align-center">
						<image class="avatar" :src="item.yingyue_avatar" mode=""></image>
                        <view class="flex1 justify-end align-center bottom">
                                <block v-if="item.status==2">
                                    <text class="" style="color: #999; border: 1px solid #999999;background-color: transparent;">
                                        已取消
                                    </text>
                                </block>
                                <block v-else>
                                    
                                    <text @click.stop="cancel(item)" class="ml10	cancel ">取消约台</text>
                                    </block>
                 
                        </view>
						
					</view>
				</view>
				
			</view>
			<view class="" v-if="gyList.length==0">
				<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
		
		<uv-popup ref="popup" bgColor="none" mode="center">
		    <view class="flex-col align-center">
		        <view class="bgWhite popcontent flex-col justify-between plr15" style="height: 558rpx;">
		            <view class="pt15  ">
		                <view class="mb20 popTitle justify-center">
		                    同城应约
		                </view>
		            </view>
					<view @click="showLevelPicker" class="mb5" style="padding-left: 20rpx; height:82rpx;line-height:82rpx;font-size: 30rpx;color: #A7A7A7; background: #F5F5F5;border-radius:8rpx">
						{{level}}
					</view>
					<uv-textarea v-model="beizhu"  height="70" customStyle="border:none;flex:none; height:170rpx; background: #F5F5F5;border-radius:8rpx" count placeholder="请输入内容"></uv-textarea>
		            
		           <view class="save_btn" @click="save">
		           	确定应约
		           </view>
		        </view>
		        <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
		    </view>
		</uv-popup>
		<uv-picker ref="labelPicker" keyName="title"  :columns="[labelList]" @confirm="labelConfirm"></uv-picker>
		<uv-picker ref="genderPicker" keyName="title"  :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" v-model="yuyue_time" mode="datetime" @confirm="timeConfirm">
		</uv-datetime-picker>
		<uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gyList: [
				],
				genderList: [
						
					{
						id:1,
						title:"女"
					},
					{
						id:2,
						title:"男"
					},
					
				],
				orderList: [],
				page:1,
				labelType:'类型',
				timeType:'时间',
				labelList:[],
				label_id:"",
				keyword:"",
				level:"",
				yuyue_time:null,
				genderType:'性别',
				ballId:"",
				beizhu:"",
				levelList: [{
						name: '1-3段',
						id: 1
					},
					{
						name: '3-5段',
						id: 2
					},
					{
						name: '5-7段',
						id: 3
					},
					{
						name: '7-9段',
						id: 4
					},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
				],
                userInfo:uni.getStorageSync('userInfo')
			}
		},
		onLoad() {
            
			
			
			
			
			
		},
        onShow() {
            this.gyList=[
                
            ]
            this.getList()
        },
		mounted() {
			
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
            computedNum(item){
              return item.num-item.join_num  
            },
            computedNums(item){
                   let num  = ( ( item.join_num/item.num)*100).toFixed(0)
                    return  Number(num)
            },
			
			
			toApply() {
				uni.navigateTo({
					url: '/pages/addBall/index'
				})
			},
			
			async getList() {
				const {
					list
				} = await this.$api.yuyueTableOrder({
					page:this.page,
					
				})
				console.log(list)
				this.gyList =[...this.gyList,...list]
			},
			async getCate() {
				const 	list	 = await this.$api.labelLst()
				console.log(list)
					this.labelList = list.data
				
			},
			

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
				uni.navigateTo({
					url: '/pages/meetingBallDetail/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			},
			apply(data){
				this.ballId=data.id
				this.level=''
				this.beizhu=''
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			save(){
				this.$api.ballYingyue({
					level:this.level,
					beizhu:this.beizhu,
					id:this.ballId
				}).then(res=>{
					uni.showToast({
						title:'取消成功',
						icon:'none'
					})
					this.$refs.popup.close()
				})
			},
            cancel(item){
                let vm =this
                uni.showModal({
                    title:'提示',
                    content:'确定要取消该桌台吗',
                    success:function(res){
                        if(res.confirm){
                                vm.$api.cancelTableOrder({id:item.id}).then(res=>{
                                    uni.showToast({
                                    	title:'取消成功',
                                    	icon:'none'
                                    })
                                    vm.page=1
                                    vm.gyList=[]
                                    vm.getList()
                                    
                                })
                        }
                        
                    }
                })
            }
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
	.orderItem {
		font-size: 24rpx;
		color: #666;
		width: 100%;
        position: relative;
        .status{
            width: 74rpx;
            height: 38rpx;
            background: #2DB27B;
            border-radius: 8rpx;
            position:absolute;
            color:#fff;
            left:68rpx;
            font-size: 22rpx;
            top:62rpx;
            line-height:38rpx;
            text-align: center;
            
        }
        .tableName{
            position:absolute;
            color:#fff;
            left:68rpx;
            top:102rpx;
            width: 70rpx;
            text-align: center;
        }
		image {
			width: 172rpx;
			height: 196rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;
	
		}
		.avatar{
				width: 47rpx;
				height: 47rpx;
				border-radius: 50%;
		}
		.orderright {
			flex: 1;
	
			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}
	
			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
		}
	
		.apply {
			width: 116rpx;
			height: 48rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;
		}
			
		.applyed{
		width: 116rpx;
		height: 48rpx;
		background: #464646;
		border-radius: 60rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		}
	}
	.paybtn{
	    box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    padding: 20rpx 30rpx;
	    background-color: #fff;
	    font-weight: 500;
	    font-size: 24rpx;
	    color: #222222;
	    .payright{
	        margin-left: 40rpx;
	        view{
	            width:466rpx;
	            height: 84rpx;
	            border-radius: 50rpx ;
	            color: #fff;
	            line-height: 84rpx;
	            font-size: 30rpx;
	            text-align: center;
	            font-weight: bold;
	            background-color: #343434;
	        }
	        .onlinePay{
	          border-radius: 50rpx ;
	            background: #01C588;
	            color: #fff;
	            
	        }
	    }
	    
	    image{
	        width: 44rpx;
	    }
	 
	  
	}
	.save_btn {
		width: 100%;
		height: 90rpx;
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		background: #2CC6A1;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
	.baoming{
		height: 60rpx;
		background-color: #D9F6ED;
		padding-left: 15rpx;
		font-size: 22rpx;
        position: relative;
		color: #00C584;
		border-radius: 15rpx 15rpx 60rpx 15rpx;
		
		image{
			margin: 0;
			margin-left: 15rpx;
			width: 146rpx;
		}
	}
    .statustext{
        position: absolute;
        right: 20rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 9;
    }
    .bottom{
        text{
            display: inline-block;
            width: 140rpx;
            height: 48rpx;
            background: #4F4F4F;
            color: #fff;
            text-align: center;
            line-height: 48rpx;
            border-radius: 24rpx;
        }
        .cancel{
            background: #00C584;
        }
    }
</style>